<template>
  <div style="margin: 0 20%">
    <div class="card" style="margin-bottom: 5px">
      <el-input
        v-model="data.name"
        prefix-icon="Search"
        style="width: 240px; margin-right: 10px"
        placeholder="请输入宠物名称查询"
      ></el-input>
      <el-button type="info" plain @click="load">查询</el-button>
      <el-button type="warning" plain style="margin: 0 10px" @click="reset"
        >重置</el-button
      >
    </div>

    <div class="card" style="margin-bottom: 5px">
      <el-table
        tooltip-effect="dark myTooltip"
        stripe
        :data="data.tableData"
        @selection-change="handleSelectionChange"
        @cell-click="toDetails"
      >
        <el-table-column prop="name" label="宠物名称"></el-table-column>
        <el-table-column prop="typeName" label="宠物类型"></el-table-column>
        <el-table-column prop="breed" label="宠物品种"></el-table-column>
        <el-table-column prop="sex" label="宠物性别"></el-table-column>
        <el-table-column prop="location" label="宠物所在地"></el-table-column>
        <el-table-column prop="photo" label="宠物图片">
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px; border-radius: 5px"
              :src="scope.row.photo"
              :preview-src-list="[scope.row.photo]"
              preview-teleported
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="云养金额"></el-table-column>
      </el-table>
    </div>
    <div class="card" v-if="data.total">
      <el-pagination
        @current-change="load"
        background
        layout="total, prev, pager, next"
        :page-size="data.pageSize"
        v-model:current-page="data.pageNum"
        :total="data.total"
      />
    </div>
  </div>
</template>
    
    <script setup>
import { reactive, ref } from "vue";
import request from "@/utils/request.js";
import { ElMessage, ElMessageBox } from "element-plus";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, shallowRef } from "vue";
const data = reactive({
  user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
  formVisible: false,
  formVisibleAudit: false,
  form: {},
  dynamicForm: {},
  healthForm: {},
  tableData: [],
  pageNum: 1,
  pageSize: 10,
  total: 0,
  name: null,
  ids: [],
  shopList: [],
  typeList: [],
  rules: {
    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
    typeId: [{ required: true, message: "请选择分类", trigger: "change" }],
    price: [{ required: true, message: "请输入价格", trigger: "blur" }],
    url: [{ required: true, message: "请上传视频", trigger: "blur" }],
  },
  viewVisible: false,
  viewVisibleHealth: false,
  content: null,
});

const formRef = ref();

const baseUrl = import.meta.env.VITE_BASE_URL;
const handleFileUpload = (res) => {
  data.form.photo = res.data;
  data.dynamicForm.url = res.data;
};

const view = (content) => {
  data.content = content;
  data.viewVisible = true;
};

/* wangEditor5 初始化开始 */
const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
const mode = "default";
const editorConfig = { MENU_CONF: {} };
// 图片上传配置
editorConfig.MENU_CONF["uploadImage"] = {
  headers: {
    token: data.user.token,
  },
  server: baseUrl + "/files/wang/upload", // 服务端图片上传接口
  fieldName: "file", // 服务端图片上传接口参数
};
// 组件销毁时，也及时销毁编辑器，否则可能会造成内存泄漏
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
// 记录 editor 实例，重要！
const handleCreated = (editor) => {
  editorRef.value = editor;
};
/* wangEditor5 初始化结束 */

request.get("/petShop/selectAll").then((res) => {
  data.shopList = res.data;
});

request.get("/petType/selectAll").then((res) => {
  data.typeList = res.data;
});

const load = () => {
  request
    .get("/pet/cloud/query/my/cloud/pet", {
      params: {
        pageNum: data.pageNum,
        pageSize: data.pageSize,
      },
    })
    .then((res) => {
      if (res.code === "200") {
        data.tableData = res.data?.list || [];
        data.total = res.data?.total;
      } else {
        ElMessage.error(res.msg);
      }
    });
};
const handleSelectionChange = (rows) => {
  data.ids = rows.map((v) => v.id);
};

const reset = () => {
  data.name = null;
  load();
};

load();
const audit = (status) => {
  data.form.auditStatus = status;
  request.put("/petFostering/audit", data.form).then((res) => {
    if (res.code == 200) data.formVisibleAudit = false;
    ElMessage.success("操作成功");
  });
};
import { useRouter } from "vue-router";
const router = useRouter();
const toDetails = (row) => {
  router.push({ path: "/front/PetCloudDetails", query: { id: row.id } });
};
</script>
    
    <style>
.myTooltip {
  max-width: 40% !important;
}
</style>